<template>
	<view
		class="nav-packbox flex flex-direction-column"
		v-if="isShow"
		:style="{
			height: commonNavHeight + 'px'
		}"
	>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
			<!-- 
				非H5端，手机顶部状态栏区域会被页面内容覆盖。
				这是因为窗体是沉浸式的原因，即全屏可写内容。
				uni-app提供了状态栏高度的css变量--status-bar-height，
				如果需要把状态栏的位置从前景部分让出来，可写一个占位div，高度设为css变量。 
			-->
		</view>
		<view
			class="nav-content flex absolute"
			:style="{
				height: globalData.menuHeight + 'px',
				top: globalData.menuTop + 'px',
			}"
		>
			<view class="nav-item flex-align-items-center left">
				<slot name="left"></slot>
			</view>

			<!-- <view class="nav-item center flex flex-justify-content-center flex-align-items-center">
				<slot name="center">
					<text class="uni-title">
						{{ commonNavTitle }}
					</text>
				</slot>
			</view> -->

			<view class="nav-item flex-align-items-center right">
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store';

	export default {
		name: 'comNav',
		props: {
			
			tabCurrentIndex: {
				type: String,
				default: () => ''
			},
			// 是否占用显示导航栏
			isShow: {
				type: Boolean,
				default: () => true
			},
			
		},
		computed: {
			// 导航栏标题
			commonNavTitle() {
				return store.getters.commonNavTitle;
			},
			// 导航栏高度
			commonNavHeight() {
				return store.getters.commonNavHeight;
			}
		},

		data() {
			return {
				// 导航栏信息
				globalData: {
					menuTop: 0, // 小程序标题栏胶囊距离顶部位置
					menuHeight: 0, // 小程序标题栏胶囊高度
				}
			};
		},

		created() {
			let menuButtonObject = {};
			
			// #ifdef MP-WEIXIN
			// 获取小程序胶囊信息 - 标题栏
			menuButtonObject = uni.getMenuButtonBoundingClientRect();
			console.log("menuButtonObject:", menuButtonObject);
			// #endif
			
			// #ifndef MP-WEIXIN
			// 设置APP状态栏
			menuButtonObject = {
				height: 32, // 标题栏高度
				top: 0, // 标题栏位置
			}
			// #endif

			// 获取设备信息
			uni.getSystemInfo({
				success: (res) => {
					console.log("getSystemInfo:", res);
					
					let commonNavHeight = 0; // 整个导航栏的高度
					let nav = 0; // 导航栏的高度 - 状态栏高度
					
					// #ifdef MP-WEIXIN
					// 整个导航栏的高度
					commonNavHeight = menuButtonObject.top + menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight) * 2;
					
					// 导航栏的高度 - 状态栏高度
					nav = commonNavHeight - res.statusBarHeight;
					// #endif
					
					// #ifdef APP-PLUS
					// 整个导航栏的高度
					commonNavHeight = menuButtonObject.height + res.statusBarHeight + 10;
					
					// 导航栏的高度 - 状态栏高度
					nav = res.statusBarHeight;
					
					menuButtonObject.top = res.statusBarHeight;
					// #endif
					
					// 挂载 globalData 上
					this.globalData.commonNavHeight = commonNavHeight;
					this.globalData.nav = nav;
					
					// 胶囊的高度
					this.globalData.menuHeight = menuButtonObject.height;
					// 胶囊距离顶部的高度
					this.globalData.menuTop = menuButtonObject.top;
					
					
					console.log("commonNavHeight:", commonNavHeight)
					store.commit('NAV_HEIGHT_SET_FUN', commonNavHeight);
				},
				fail: (err) => {
					console.log(err);
				}
			});
		}
	};
</script>

<style lang="scss">
	.nav-packbox {
		width: 100%;
		z-index: 10000;
		color: #fff;
		position: fixed;
		left: 0;
		
		// 状态栏
		.status_bar {
			position: fixed;
			height: var(--status-bar-height);
			width: 100%;
		}
		
		// 导航栏
		.nav-content {
			position: fixed;
			width: 100%;
			left: 0;
			padding: 0 20rpx;

			.uni-title {
				font-size: 28rpx;
			}

			.nav-item.left,
			.nav-item.right {
				position: relative;
				z-index: 100;
			}
			.nav-item.center {
				position: absolute;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
